.wrapper {

  h2,
  h3 {
    position: relative;
  }

  h2 {
    padding-left: 150px;
    text-align  : left;

    &::before {
      content  : "";
      position : absolute;
      top      : 0%;
      bottom   : 0;
      left     : 120px;
      animation: colon 2s infinite steps(3, start);
    }
  }

  h3 {
    position     : relative;
    text-align   : right;
    padding-right: 200px;

    &::after {
      content  : "";
      position : absolute;
      top      : 0%;
      bottom   : 0;
      animation: dot 3s infinite steps(3, start);
    }
  }


  @keyframes dot {
    33.33% {
      content: ".";
    }

    66.67% {
      content: "..";
    }

    100% {
      content: "...";
    }
  }

  @keyframes colon {
    50% {
      content: ":"
    }

    100% {
      content: ""
    }
  }
}